<template>
	<view class="replyJob">
		<view class="areaBox">
			<u--textarea v-model="content" placeholder="请输入~" height="200"></u--textarea>
		</view>

		<view class="uploadBox">
			<view class="title">
				上传图片
			</view>
			<view class="imgBox">
				<view class="" v-for="(item,index) in imgs" style="position: relative;">
					<image :src="item" mode=""
						style="width: 140rpx;height: 140rpx;border-radius: 10rpx;margin-right: 30rpx;"></image>
					<view class="" style="position: absolute;top:-20rpx;right:8rpx" @click="handleDelimg(index)">
						<u-icon name="close-circle" size="23"></u-icon>
					</view>
				</view>
				<image v-if="imgs.length<9" src="../../static/image/uploadImg.png" mode=""
					style="width: 140rpx;height: 140rpx;" @click="handleUploadImg"></image>
			</view>

		</view>

		<view class="bottomBtn" @click="handleSubmit">
			确认回复
		</view>

	</view>
</template>

<script>
	import {
		replyTask
	} from "@/api/api.js"
	export default {
		data() {
			return {
				content: "",
				imgs: [],
				pageId: "",
			}
		},
		onLoad(options) {
			this.pageId = options.id
		},
		methods: {
			handleUploadImg() {
				let that = this
				uni.chooseImage({
					count: 9 - that.imgs.length, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log("tempFilePaths", tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://lycheedu.com.cn/api/index/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									// console.log("图片路径//////", JSON.parse(uploadFileRes.data).data);
									if (that.imgs.length >= 9) {
										uni.showToast({
											title: '最多可上传9张图片！',
											duration: 1000,
											icon: "none",
										});
									} else {
										that.imgs.push(JSON.parse(uploadFileRes.data).data)
										// console.log("that.imgs", that.imgs);
									}
								},
								fail(e) {
									// console.log("上传图片", e)
								}
							});
						}
					}
				});
			},

			handleDelimg(index) {
				this.imgs.splice(index, 1)
			},
			async handleSubmit() {
				let data = {
					id: this.pageId,
					content: this.content,
					image: this.imgs.join(",")
				}
				// console.log("3333", data)
				let res = await replyTask(data)
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1700
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.replyJob {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}

	.areaBox {
		width: 690rpx;
		margin: 0 auto;
		padding-top: 30rpx;
	}

	.uploadBox {
		margin-top: 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.imgBox {
			margin-top: 26rpx;
			display: flex;
			flex-wrap: wrap;
		}
	}

	.bottomBtn {
		width: 630rpx;
		height: 88rpx;
		background: #255A9B;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		position: absolute;
		bottom: 40rpx;
		margin-left: 60rpx;
	}
</style>